<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >

    <div class="modal-ctrl-body" v-if="addModalObj.isShow">
      <div class="modal-ctrl-main map-ctrl">
        <div class="modal-title">
          <p>新增封控圈信息</p>
        </div>
        <div class="modal-ctrl-content clear-false">

          <div class="map-body f-l">
            <sealingRing
              ref="threeCircles"
              :line-symbol-color="AddData.STYLE.COLOR"
              :line-symbol-width="lineSymbolWidth"
              :line-symbol-style="lineSymbolStyle"
              :rings="rings"
              @clearAllPoint="clearAllPoint"
              @graphicJSON="graphicJSON"
              @addPointData="addPointData">
            </sealingRing>
          </div>
          <div class="map-body f-l" :style="{right: openMapDataContentIsShow ? '0':'-640px'}">

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                类型：
              </div>
              <select @change="selectName"  v-model="AddData.NAME" class="modal-text">
                <option value="-1">请选择类型</option>
                <option v-for="item in nameList" :category="item.category" :value="item.targetMenuCode">{{ item.name }}</option>
          <!--      <option value="JCCFKQ">进出城封控圈</option>
                <option value="EHXFKQ">二环线封控圈</option>
                <option value="SHXFKQ">三环线封控圈</option>
                <option value="SQJTYD">市区交通要道</option>
                <option value="CZMTJC">车站码头机场</option>
                <option value="GJQSFKQ">过江桥隧封控圈</option>
                <option value="HHFKQ">环汉封控圈</option>
                <option value="HEFKQ">环鄂封控圈</option>-->
              </select>
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                所属辖区：
              </div>
              <select @change="selectDistrict" v-model="AddData.DEPARTMENT" class="modal-text">
                <option value="-1">选择所属辖区</option>
                <option v-for="item in areaList" :value="item.targetMenuCode">{{ item.name }}</option>
              </select>
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                名称：
              </div>
              <input v-model="AddData.DISPLAYNAME" type="text" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                所属单位：
              </div>
              <input type="text" v-model="stationName" readonly="readonly" @click="StationTreeIsShow" class="modal-text f-l" >
              <input type="hidden" v-model="AddData.STATION_ID">
              <!--{{sectionTreeIShow}}-->
              <div class="sectionTree" v-show="sectionTreeIShow">
                <div id="sectionTree" class="ztree sectionTree-box"></div>
              </div>

            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                等级：
              </div>
              <select @change="selectGrade" v-model="AddData.GRADE" class="modal-text">
                <option value="-1">选择等级</option>
                <option value="1">一级</option>
                <option value="2">二级</option>
                <option value="3">三级</option>
              </select>
            </div>

            <div class="modal-row f-l">
              <div class="modal-form-key f-l indispensable">
                线段颜色：
              </div>
              <div class=""></div>
              <input type="color" style="width: 60%;height: 30px;" v-model=AddData.STYLE.COLOR>
              <!--   <input type="text" v-model=AddData.WIDTH>{{AddData.WIDTH}}
                 <input type="text" v-model=AddData.WIDTH>{{AddData.WIDTH}}-->
            </div>

            <div class="modal-row f-l">
              <div class="modal-form-key f-l indispensable">
                线宽：
              </div>
              <div class="select-line-style-box f-l"  @click="clickSelectLine">
                <span>{{AddData.STYLE.WIDTH}}</span>
                <ul class="select-line" v-show="selectLineIsShow">
                  <li v-for="line in selectLine" @click="selectLineStyle(line)" :value="line"></li>
                </ul>
              </div>
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l">
                备注：
              </div>
              <!--<input v-model="AddData.COMMENTS" type="text" class="modal-text f-l">-->
              <textarea v-model="AddData.COMMENTS" maxlength="100" class="modal-text f-l"></textarea>
            </div>

            <div class="clear-float"></div>
            <div class="import-point-body">
              <p class="title">重点部位点位信息</p>
              <div class="point-list-body">
                <div class="sectionTree" :style="{top:sectionPointTreeTop + 'px'}" v-show="sectionPointTreeIShow">
                  <div id="sectionPointTree" class="ztree sectionTree-box"></div>
                </div>
                <div v-for="(pointItem,index) in pointListObj" class="point-list clear-true">
                  <button class="btn btn-warning" @click="deleteListPoint(pointItem,index)">删除</button>
                  <div class="clear-float"></div>
                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l indispensable">
                      名称：
                    </div>
                    <input v-model="pointItem.name" maxlength="16" placeholder="最长16个字符" type="text" class="modal-text f-l">
                  </div>
                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l indispensable">
                      地址：
                    </div>
                    <input v-model="pointItem.address" maxlength="64" placeholder="最长64个字符" type="text" class="modal-text f-l">
                  </div>
                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l indispensable">
                      经度：
                    </div>
                    <input v-model="pointItem.longitude" type="text" maxlength="12" class="modal-text f-l">
                  </div>
                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l indispensable">
                      纬度：
                    </div>
                    <input v-model="pointItem.latitude" type="text" maxlength="11" class="modal-text f-l">
                  </div>
                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l indispensable">
                      所属单位：
                    </div>
                    <input readonly="readonly" @click="StationPointTreeIsShow($event,index)" v-model="pointItem.stationName" type="text" class="modal-text f-l">
                    <input v-model="pointItem.stationId" type="hidden" class="modal-text f-l">
                  </div>
                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l">
                      服务电话：
                    </div>
                    <input v-model="pointItem.phone" type="text" class="modal-text f-l">
                  </div>

             <!--     <div class="modal-row f-l" >
                    <div class="modal-form-key f-l">
                      占地面积：
                    </div>
                    <input v-model="pointItem.covered_area" type="text" class="modal-text f-l">
                  </div>
                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l">
                      建筑面积：
                    </div>
                    <input v-model="pointItem.building_area" type="text" class="modal-text f-l">
                  </div>
                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l">
                      建成时间：
                    </div>
                    <input v-model="pointItem.birthday" type="text" class="modal-text f-l">
                  </div>-->

                  <div class="clear-float"></div>
                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l indispensable">
                      大图标：
                    </div>
                    <img class="icon-img" @click="selectBigImgShow(pointItem)" :src="pointItem.bigDisplayImg|setDisplayImg" v-model="pointItem.bigDisplayImg" alt="">
                    <div class="select-icon-body" v-show="pointItem.bigSelectShow">
                      <i class="closeBtn" @click="selectBigImgShow(pointItem)">X</i>
                      <ul class="select-icon-list">
                        <li v-for="imgs in iconLis" @click="selectBigImg(imgs,pointItem)">
                          <img class="icon-img" :src="imgs.STORE_ID|setDisplayImg" alt="">
                          <p>{{ imgs.NAME }}</p>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l indispensable">
                      小图标：
                    </div>
                    <img class="icon-img" @click="selectSmallImgShow(pointItem)" :src="pointItem.smallDisplayImg|setDisplayImg" v-model="pointItem.smallDisplayImg" alt="">
                    <div class="select-icon-body" v-show="pointItem.smallSelectShow">
                      <i class="closeBtn" @click="selectSmallImgShow(pointItem)">X</i>
                      <ul class="select-icon-list">
                        <li v-for="imgs in iconLis" @click="selectSmallImg(imgs,pointItem)">
                          <img class="icon-img" :src="imgs.STORE_ID|setDisplayImg" alt="">
                          <p>{{ imgs.NAME }}</p>
                        </li>
                      </ul>
                    </div>
                  </div>

                </div>

              </div>
            </div>

          </div>
          <div class="map-data-show"
               :style="{right: openMapDataContentIsShow ? '600px':'-40px'}"
               @click="openMapDataContent"
               title="录入地图信息"
          >
            <span class="glyphicon"
                  :class="{'glyphicon-chevron-left':!openMapDataContentIsShow,'glyphicon-chevron-right':openMapDataContentIsShow}">
            </span>
            <span class="glyphicon"
                  :class="{'glyphicon-chevron-left':!openMapDataContentIsShow,'glyphicon-chevron-right':openMapDataContentIsShow}">
            </span>
          </div>
        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="close">取消</button>
          <button type="button" class="btn btn-info" @click="subBtn">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
    import sealingRing from "../../map/sealingRing/sealingRing"
    export default {
      name: "AddTrafficControlLoopModal",
      props:["addModalObj"],
      data(){
        return{
          graphicsItems: [],
          data:[],
          lineSymbolColor: '#333333',
          lineSymbolWidth: '4',
          lineSymbolStyle: 'solid',
          objectId: null,
          searchObjectId: 0,
          rings: null,
          areaList:[],
          nameList:[],
          selectLine:["dash_1","solid_2","solid_4","solid_6","solid_8"],
          selectLineIsShow: false,
          AddData:{
            NAME:"-1",//类型
            DEPARTMENT:"-1",//所属辖区
            GRADE:"-1",//等级
            CHECK_POINT:[], //重要部位
            CREATE_TIME:"",//创建时间
            DISPLAYNAME:"",//名称
            STATION_ID:"",
            /* COLOR:"#333333",//线颜色
             WIDTH:"solid|4",//线宽*/
            STYLE:{
              COLOR:"#333333",
              WIDTH:"solid_4",
            },
            MAP_CODE:"",//地图标识符 新增线路的objectID
            CREATOR:"",//创建人
            COMMENTS:"",//备注
          },
          setting : {
            data: {
              simpleData: {
                enable: true
              },
            }
          },
          settingPoint : {
            data: {
              simpleData: {
                enable: true
              },
            }
          },
          smallDisplayImg:"static/img/upicon.png",
          bigDisplayImg:"static/img/upicon.png",
          sectionTreeIShow:false,
          sectionPointTreeIShow:false,
          sectionPointTreeTop:0,
          sectionPointTreeIndex:0,
          stationName:"",
          iconLis:[],
          selectObj:{
            bigSelect:false,
            smallSelect:false,
          },
          point:[114.21868761726246, 30.584733852070247],
          actionType:null,
          pointListObj:[],
          districtName:"",
          openMapDataContentIsShow :false,
          sectionTreeList:[],
          categoryType:"",
        }
      },
      components:{
        sealingRing
      },
      filters:{
        setDisplayImg:function(src){
          let value = "";
          ////console.log(src.match(/static/));
          src = src ? src : "static/img/upicon.png";
          if( src.match(/static/) ){
            value = src.match(/static/).input;
          }else{
            value = baseURL +"api/jp-TIFS-FileCenter-ms/file?businessId="+src;
          }
          return value;
        }
      },
      watch:{
        addModalObj:{
          handler(v1){
            if( v1.isShow ){
              this.getStationTree();
            }
          },
          deep:true
        }
      },
      created(){
        //获取所属地区
        this.getAreaList();
        this.getNameList();
      },
      methods:{
        //提交
        subBtn(){
          //console.log(this.AddData);
          //console.log(this.pointListObj);
          this.AddData.CREATOR = this.isLogin().userId;
          //三圈信息验证
          if( this.verifyForm.isNull(this.AddData.NAME) ){
            this.s_alert("类型不能为空！");
            return false;
          }else if( this.verifyForm.isNull(this.AddData.GRADE) ){
            this.s_alert("等级不能为空！");
            return false;
          }else if( this.verifyForm.isNull(this.AddData.DEPARTMENT) ){
            this.s_alert("所属辖区不能为空！");
            return false;
          }else if( this.verifyForm.isNull(this.AddData.DISPLAYNAME) ){
            this.s_alert("名称不能为空！");
            return false;
          }else if( this.verifyForm.isNull(this.AddData.STATION_ID) ){
            this.s_alert("所属单位不能为空！");
            return false;
          }

          //重要点位信息验证
          if( this.pointListObj.length > 0 ){
            for( let i=0;i<this.pointListObj.length;i++ ){
              if( this.verifyForm.isNull(this.pointListObj[i].name) ){
                this.s_alert("第"+ (i+1) +"个重要部位的名称不能为空！");
                return false;
              }else if( this.verifyForm.isNull(this.pointListObj[i].address) ){
                this.s_alert("第"+ (i+1) +"个重要部位的地址不能为空！");
                return false;
              }else if( this.verifyForm.isNull(this.pointListObj[i].big_image) ){
                this.s_alert("第"+ (i+1) +"个重要部位的大图不能为空！");
                return false;
              }else if( this.verifyForm.isNull(this.pointListObj[i].small_image) ){
                this.s_alert("第"+ (i+1) +"个重要部位的小图不能为空！");
                return false;
              }else if( this.verifyForm.isIphoneOrTell(this.pointListObj[i].phone) ){
                this.s_alert("第"+ (i+1) +"个重要部位的服务电话格式不正确！");
                return false;
              }else if( this.verifyForm.isNull(this.pointListObj[i].stationId) ){
                this.s_alert("第"+ (i+1) +"个重要部位的所属单位不能为空！");
                return false;
              }
            }
          }else {
            this.s_alert("请设置重要点位！");
            return false;
          }

          if( this.categoryType === "default" ){
            let params = {
              "columns": ["*"],
              "conditions": [
                {"field": "NAME","symbol":"=","value":this.AddData.NAME}
              ],
              "dataTypeCode": "pointresource",
              "pageIndex": 1,
              "pageSize": 20,
              "tableName": "T_RES_CONTROL_AREA"
            };
            this.$axios.post(this.HOST+"/base/query/page",params)
              .then(res=>{
                console.log(res);
                if( res.data.data.list.length > 0 ){
                  this.s_alert("该类型封控圈已存在！不允许重复添加！");
                  return false;
                }else{
                  this.subForm();
                }
              })
              .catch(err=>{
                console.log(err);
              })
          }else{
            this.subForm();
          }

        },
        //提交
        subForm(){
          this.AddData.CHECK_POINT = JSON.stringify(this.pointListObj);
          this.AddData.STYLE = JSON.stringify(this.AddData.STYLE);
          //console.log(JSON.stringify(this.pointListObj));
          //return false;
          console.log(this.AddData);
          //return false;
          //新增地图
          if(this.data.length>0){
            this.$axios({
              method: 'post',
              url: mapFeatureServer + '2/addFeatures', // 1 线 2 圈
              data: 'f=json&features='+JSON.stringify(this.data),
              headers: {"Content-Type": "application/x-www-form-urlencoded"}
            }).then( res => {
              this.AddData.MAP_CODE = res.data.addResults[0].objectId;
              //console.log(this.AddData.MAP_CODE);
              //this.s_alert('新增成功'+this.objectId);
              //新增线路数据
              let paramsKey = [];
              let paramsValue = [];
              for( let kay in this.AddData ){
                paramsKey.push(kay);
                paramsValue.push(this.AddData[kay]);
              }
              //console.log(paramsKey);
              //console.log(paramsValue);
              let params ={
                "columns": paramsKey,
                "dataTypeCode": "pointresource",
                "datas": paramsValue,
                "tableName": "T_RES_CONTROL_AREA"
              };
              //console.log(params);

              this.$axios.post(this.HOST+"/base/save",params)
                .then((data)=>{
                  //console.log(data);
                  if( data.data.success ){
                    this.s_alert("新增成功！");
                    this.s_logwrite("点位信息管理-封控圈管理","新增封控圈");
                    this.close();
                  }
                })
                .catch((err)=>{
                  //console.log(err);
                })
            })
          }
          else {
            this.s_alert("请先画线");
          }
        },
        //获取部门树
        getStationTree(){
         // this.sectionTreeIShow = !this.sectionTreeIShow;
          this.$axios.get(this.HOST+'/station/getOrgaInfo')
            .then((data)=>{
              $.fn.zTree.init($("#sectionTree"), this.setting, data.data.data);
              $.fn.zTree.init($("#sectionPointTree"), this.settingPoint, data.data.data);
              //console.log(data);
            })
            .catch((err)=>{
              //console.log(err);
            })
        },
        StationTreeIsShow(ele){
          this.sectionTreeIShow = !this.sectionTreeIShow;
        },
        StationPointTreeIsShow(ele,index){
          this.sectionPointTreeIndex = index;
          console.log($(ele.target).parents(".modal-row").position().top + 30);
          this.sectionPointTreeTop = $(ele.target).parents(".modal-row").position().top + 30;
          this.sectionPointTreeIShow = !this.sectionPointTreeIShow;
          console.log(this.sectionPointTreeIShow);

        },
        //获取所属地区
        getAreaList(){
          //POST /dictionary/{key}
         /* this.$axios.post(this.HOST+"/dictionary/area")
            .then(res=>{
              //console.log(res);
              this.areaList = res.data;
            })
            .catch(err=>{
              //console.log(err);
            })*/
          this.$axios.post(this.DotCtrl+"/mapDictionaryRelation/getRelationInfoList",{
            "parentMenuCode": "MAP_SSDW",
          })
            .then(res=>{
              /*   //console.log(1);
                 //console.log(res);*/
              let success = res.data;
              let list = [];
              for( let i=0;i<success.length;i++ ){
                success[i].targetMenuCode = success[i].targetMenuCode.split("_")[1];
                list.push(success[i]);
              }
              this.areaList = list;
              //console.log(this.areaList);
            })
            .catch(err=>{
              //console.log(err);
            })
        },
        //获取封控圈名称
        getNameList(){
          //POST /dictionary/{key}
          this.$axios.post(this.DotCtrl+"/mapDictionaryRelation/getRelationInfoList",{
            "parentMenuCode": "MAP_FKQ",
          })
            .then(res=>{
              /*   //console.log(1);
                 //console.log(res);*/
              console.log(res);
              let success = res.data;
              let list = [];
              for( let i=0;i<success.length;i++ ){
                success[i].targetMenuCode = success[i].targetMenuCode.split("_")[1];
                list.push(success[i]);
              }
              this.nameList = list;
              //console.log(this.nameList);
            })
            .catch(err=>{
              //console.log(err);
            })
        },
        //加载图标库
        getIconAjax(){
          //GET /camera/fetchTAllCamera
          //console.log(this.HOST);
          let params = {
            "columns": ["*"],
            "conditions": [],
            "dataTypeCode": "pointresource",
            "pageSize": -1,
            "tableName": "T_RES_IMAGE_LIB",
            "sorters": [
              {
                "order": "desc", //asc
                "sortField": "UPLOAD_TIME"
              }
            ],
          };
          //POST /base/query/page
          this.$axios.post(this.HOST+"/base/query/page",params)
            .then((data)=>{
              //console.log(data);
              this.iconLis = data.data.data.list;
              //console.log(this.iconLis);
            })
            .catch((err)=>{
              //console.log(err);
            })
        },
        //选择图标
        selectBigImg(img,item){
          //console.log(img);
          item.big_image = img.ID;
          item.bigDisplayImg = img.STORE_ID;
          this.selectBigImgShow(item);
        },
        selectSmallImg(img,item){
          item.small_image = img.ID;
          item.smallDisplayImg = img.STORE_ID;
          this.selectSmallImgShow(item);
        },
        //大图选择
        selectBigImgShow(item){
          //console.log(item);
          item.bigSelectShow = !item.bigSelectShow;
        },
        selectSmallImgShow(item){
          item.smallSelectShow = !item.smallSelectShow;
        },
        //关闭弹出
        close(){
          this.$emit("closeModal");
          this.clearData();
        },
        //删除重要点位
        deleteListPoint(obj,index){
          //console.log(obj);
          //console.log(index);
          this.pointListObj.splice(index,1);
          this.$refs.threeCircles.deletePoint(obj.uid);
        },
        //清除缓存
        clearData(){
          this.AddData={
            NAME:"-1",//名称
            DEPARTMENT:"-1",//所属辖区
            GRADE:"-1",//等级
            CHECK_POINT:[], //重要部位
            CREATE_TIME:"",
            DISPLAYNAME:"",
            STATION_ID:"",
            /* COLOR:"#333333",//线颜色
             WIDTH:"solid|4",//线宽*/
            STYLE:{
              COLOR:"#333333",
              WIDTH:"solid_4",
            },
            MAP_CODE:"",//地图标识符 新增线路的objectID
            CREATOR:"",//创建人
            COMMENTS:"",//备注
          };
          this.pointListObj = [];
          this.openMapDataContentIsShow = false;
          this.stationName = "";
          this.categoryType = "";
        },
        // 获取地图点位数组
        addPointData(graphicsItems){

          this.graphicsItems = graphicsItems;
          //console.log(this.graphicsItems);
          //清除原有的数据
          //this.pointListObj = [];
          //循环得出 点id和经纬度

          let pointData = {};
          pointData.uid = this.graphicsItems.attributes.uid;
          //console.log(pointData);
          pointData.latitude = this.graphicsItems.geometry.latitude;
          pointData.longitude = this.graphicsItems.geometry.longitude;
          pointData.name = "";//点位名称
          pointData.address = "";//点位地址
          pointData.stationName = "";//点位所属辖区
          pointData.stationId = "";//点位所属辖区ID
          pointData.phone = "";//点位服务电话
          pointData.covered_area = "";//点位占地面积
          pointData.building_area = "";//点位建筑面积
          pointData.birthday = "";//点位建成时间
          pointData.big_image = "";//大图标储存id
          pointData.bigDisplayImg = "static/img/upicon.png";//大图标储存id
          pointData.bigSelectShow = false;
          pointData.small_image = "";//大图标储存id
          pointData.smallSelectShow = false;
          pointData.smallDisplayImg = "static/img/upicon.png";//大图标储存id
          this.pointListObj.push(pointData);

        },
        //等级
        selectGrade(ele){
          //console.log(ele.target.value);
          this.AddData.GRADE = ele.target.value;
        },
        //名称
        selectName(ele){
          let _index = $(ele.target)[0].selectedIndex-1;
          this.AddData.NAME = ele.target.value;
          if( _index >= 0 ){
            this.categoryType = this.nameList[_index].category;
          }else{
            this.categoryType = "";
          }
          console.log(this.categoryType);
        },
        //所属单位
        selectDistrict(ele){
          //console.log(ele.target.value);
          //console.log($(ele.target)[0].selectedOptions[0].text);
          this.AddData.DEPARTMENT = ele.target.value;
        /*  this.districtName = $(ele.target)[0].selectedOptions[0].text;
          for( let i=0;i<this.pointListObj.length;i++ ){
            this.pointListObj[i].district = this.districtName;
            this.pointListObj[i].districtId = this.AddData.DEPARTMENT;
          }*/
        },
        //地图json
        graphicJSON(json){
          json.attributes["Name"] = "name";
          this.data = [
            {
              "geometry": json.geometry,
              "attributes": json.attributes
            }
          ];
          //console.log(JSON.stringify(this.data));
        },

        //选择线样式
        selectLineStyle(style){
          ////console.log(style);
          this.AddData.STYLE.WIDTH = style;
          let arrStyle = style.split("_");
          this.lineSymbolStyle = arrStyle[0];
          this.lineSymbolWidth = arrStyle[1];
          //console.log(arrStyle);
        },
        //选择线段隐藏与显示
        clickSelectLine(){
          this.selectLineIsShow = !this.selectLineIsShow
        },
        // 清除所有点位信息
        clearAllPoint() {
          this.pointListObj = [];
        },
        //展开地图数据录入界面
        openMapDataContent(){
          this.openMapDataContentIsShow = !this.openMapDataContentIsShow;
        }
      },
      mounted(){
        //加载图标库
        this.getIconAjax();
        let _this = this;
        this.setting.callback = {
          onClick:function(event,treeId,treeNode){ //新增警员部门树选择
            //console.log(treeNode);
            _this.stationName = treeNode.name;
            _this.AddData.STATION_ID = treeNode.id;
            _this.sectionTreeIShow = false;
          }
        };
        this.settingPoint.callback = {
          onClick:function(event,treeId,treeNode){ //新增警员部门树选择
            //console.log(treeNode);sectionPointTreeIndex
            //_this.stationName = treeNode.name;
            //_this.AddData.STATION_ID = treeNode.id;
            _this.pointListObj[_this.sectionPointTreeIndex].stationName = treeNode.name;
            _this.pointListObj[_this.sectionPointTreeIndex].stationId = treeNode.id;
            _this.sectionPointTreeIShow = false;
          }
        };
      },
    }
</script>

<style scoped>
  .form-control{
    height: 100%;
    border: 1px solid #ccc;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
  .sectionTree-box{
    position: absolute;
    z-index: 99;
    padding: 10px;
    right: 0;
    width: 60%;
    top: 30px;
    height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(51,51,51,0.2);
  }
  .import-point-body .point-list-body .sectionTree{
    width: 50%;
    position: absolute;
  }

  .import-point-body .point-list-body .sectionTree .sectionTree-box{
    height: 100px;
    top: 0;
  }
</style>
